<!doctype html>
<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
  <head>
    <title>base load test</title>
    <base href="../../html/">
    <script>
      window.loadEvents = 0;
      (function() {
        function importLoaded(event) {
          window.loadEvents++;
          if (event.type === 'load' && event.target.import) {
            var s = event.target.import.querySelector('script');
            chai.assert.ok(s, 'load event target can be used to find element in import');
          }
        }

        function importError(event) {
          window.loadEvents++;
        }

        window.importLoaded = importLoaded;
        window.importError = importError;
      })();
    </script>
    <script src="../../tools/htmltest.js"></script>
    <script src="../../tools/chai/chai.js"></script>
    <script src="../../../src/HTMLImports/HTMLImports.js"></script>
    <link rel="import" href="imports/load-1.html" onload="importLoaded(event)">
    <link rel="import" href="imports/load-2.html" onload="importLoaded(event)">
    <link rel="import" id="willError" href="imports/404.html" onerror="importError(event)">
  </head>
  <body>
    <div id="test1" class="red">Test</div>
    <div id="test2" class="blue">Test</div>
    <div id="test3" class="image"></div>
    <script>
      document.addEventListener('HTMLImportsLoaded', function() {
        var baseURI = location.href.replace('base/load-base.html', '').replace(location.search, '');
        chai.assert.equal(document.baseURI, baseURI, 'document.baseURI is correctly modified by base element');
        //
        chai.assert.equal(loadEvents, 3, 'expected # of load events');
        var test1 = getComputedStyle(document.querySelector('#test1')).backgroundColor;
        chai.assert.equal(test1, 'rgb(255, 0, 0)');
        var test2 = getComputedStyle(document.querySelector('#test2')).backgroundColor;
        chai.assert.equal(test2, 'rgb(0, 0, 255)');
        done();
      });
    </script>
  </body>
</html>
